<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let msg = "msg变量";
        // --- 代码补充
        // 1、页面初始化时将msg变量值作为默认写入到p标签中进行展示
        // 2、输入框以msg作为默认值进行展示，输入框在输入数据时可以及时完成msg变量的修改，同时p标签的内容也会随之更新
        // 3、按钮被点击时通过弹窗方式提示最新的msg数据变量
        // -----
        window.onload = function(){
            let divDom = document.querySelector("#app");
            // div元素内部寻找第一个P元素
            let pDom = divDom.querySelector("p");
            // [] 属性选择器
            let inputDom = divDom.querySelector("input[type='text']");
            let buttonDom = divDom.querySelector("input[type=button]");

            pDom.innerHTML = msg;
            inputDom.value = msg;

            inputDom.addEventListener("input",function(){
                // this ===> inputDom
                msg = this.value;
                pDom.innerHTML = msg;
            })
            buttonDom.addEventListener("click",function(){
                alert(msg)
            })

        }
    </script>
</head>
<body>
    <div id="app">
        <p></p>
        <input type="text">
        <input type="button" value="tip">
    </div>
</body>
</html>